<%@page import="com.google.appengine.api.blobstore.BlobKey"%>
<%@page import="com.google.appengine.api.images.ImagesServiceFactory"%>
<%@page import="com.google.appengine.api.images.ImagesService"%>
<%@page import="com.tubeonfire.entity.Playlist"%>
<%@page import="com.tubeonfire.model.admin.PlaylistModel"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	PlaylistModel model = (PlaylistModel)request.getAttribute("result");
	String url = (String)request.getAttribute("url");
	List<Playlist> listPl = model.getListResult();
	ImagesService imagesService = ImagesServiceFactory.getImagesService(); 	
%>
<jsp:include page="/admin/elements/header.jsp">
	<jsp:param value="Playlist Manager" name="title"/>
</jsp:include>
<script type="text/javascript" src="/admin/js/custom/media.js"></script>
<script type="text/javascript" src="/admin/js/mine/list_playlist.js"></script>
	<body class="loggedin">
		<jsp:include page="/admin/elements/top.jsp"/>
	    <!-- START OF MAIN CONTENT -->
	    <div class="mainwrapper">
	     	<div class="mainwrapperinner">  	     		       	       
				<jsp:include page="/admin/elements/left.jsp">
					<jsp:param value="playlist" name="current_page"/>
				</jsp:include>						              	                   
	        	<div class="maincontent noright">
	        		<div class="maincontentinner">	
        				<ul class="maintabmenu multipletabmenu">
		                	<li class="current"><a href="/admin/playlist/list">Manage Playlist</a></li>
		                    <li><a href="/admin/playlist/add">New Playlist</a></li>		                    
		                </ul>            			               
		                     
	                	<div class="content">	
	                	<jsp:include page="/admin/elements/message.jsp"/>	
	                	<div id="messageDiv" class="notification hidden">						   
						    <p></p>
						</div>
	                	<%
		                	if(model!=null&&listPl.size()>0){
		                %>          	                    
	                    	<div class="contenttitle">
	                    		<h2 class="image"><span>List Playlist</span></h2>
	                    	</div>
	                    	<br />
		                    <ul class="imagelist">
		                    <%
		                    	for(Playlist pl : listPl){
		                    		String imgUrl = pl.getImageKey();
		                    		try{
		                    			BlobKey blobKey = new BlobKey(pl.getImageKey());
		                    			imgUrl = imagesService.getServingUrl(blobKey);
		                    		}catch(Exception e){
		                    			imgUrl = "/images/tube.png";
		                    		}
		                    		
		                    %>
		                    	<li id="<%=pl.getId()%>" style="width: 280px">
		                    		<a href="/admin/playlist/edit?id=<%=pl.getId() %>" title="<%=pl.getTitle()%>" style="display: block;height:210px;overflow: hidden;background:#000;">
		                    			<img src="<%=imgUrl %>" alt="" style="width: 280px; height: auto;"/>
		                    		</a>		                    		    
		                        	<span style="text-align: right;">
		                        		<a href="/admin/playlist/edit?id=<%=pl.getId() %>" class="name" title="Edit playlist <%=pl.getTitle()%>" style="display: block;width: 100%;"><%=pl.getTitle() %></a>
		                        		<a class="btn btn4 btn_tubes" href="/admin/tube/list?playlistId=<%=pl.getId() %>" rel="<%=pl.getTitle()%>" title="View all tubes of this playlist" ></a>		                        		
		                        		<a class="btn btn4 btn_flag" href="<%=pl.getId() %>" rel="<%=pl.getTitle()%>" title="Bump" ></a>
		                        		<a class="btn btn4 btn_pencil" href="/admin/playlist/edit?id=<%=pl.getId() %>"  title="Click to edit playlist information"></a>		                        		
		                        		<a class="btn btn4 btn_trash" href="<%=pl.getId() %>" rel="<%=pl.getTitle()%>" title="Click to delete playlist"></a>
		                        	</span>
		                        </li>		                        
		                     <%
		                    	}
		                     %>                    
		                    </ul>
		                                                          
	                    	<br clear="all" />	   
	                    	<%
	                    		if(model.getTotalPage()>1){
	                    	%>  	                    	
	                    	<div class="dataTables_paginate paging_full_numbers" id="dyntable_paginate" style="border: none">
	                    		<%
		                    		if(model.getPage()>1){
	                    				%>
	                    				<a href="<%=url%>?page=1"><span class="first paginate_button paginate_button_disabled">First</span></a>
	                    				<a href="<%=url%>?page=<%=model.getPage()-1%>"><span class="next paginate_button">Previous</span></a>
	                    				<%
	                    			}
	                    		%>
	                    		<span>
	                    		<%
		                    		int startPage = 1;
	                    			int endPage = 7;
	                    			int currentPage = model.getPage();
	                    			int totalPage = model.getTotalPage();
	                    			if(currentPage<=3){
	                    				startPage = 1;
	                    				if(totalPage >= 7){
	                    					endPage = 7;	
	                    				}else{
	                    					endPage = totalPage;
	                    				}	                    					
	                    			}else{	
	                    				startPage = currentPage - 3;
	                    				if((totalPage-currentPage)>3){
	                    					endPage = currentPage + 3;	
	                    				}else{
	                    					endPage = totalPage;
	                    					startPage = totalPage - 6;
	                    					if(startPage<=0){
	                    						startPage = 1;
	                    					}	                    					
	                    				}		                    			
	                    			}	
	                    			for(int i = startPage;i<=endPage;i++){
			                  			if(model.getPage()==i){
			                  				%>  
				                    		<span class="paginate_active"><%=i %></span>
	                    					<%
			                  			}else{
			                  				%>
			                  				<a href="<%=url%>?page=<%=i%>"><span class="paginate_button"><%=i %></span></a>
			                  				<%
			                  			}
			                  		}	                    			
	                    		%>
	                    		</span>
	                    		<%
		                    		if(model.getTotalPage()>model.getPage()){
	                    				%>
	                    				<a href="<%=url%>?page=<%=model.getPage()+1%>"><span class="next paginate_button">Next</span></a>
	                    				<a href="<%=url%>?page=<%=model.getTotalPage()%>"><span class="last paginate_button">Last</span></a>
	                    				<%
	                    			}
	                    		%>
                    		</div>               	              
	                    	<%
	                    		}
		                	}
	                    	%>	
	                </div>
	               
	                <!--content-->	                
	            </div><!--maincontentinner-->
				<jsp:include page="/admin/elements/bottom.jsp"></jsp:include>                    	           	
	        </div><!--maincontent-->	                        
	     	</div><!--mainwrapperinner-->
	    </div><!--mainwrapper-->
		<!-- END OF MAIN CONTENT -->    
		<div id="opacity"></div>
		<img id="image_loadder" src="/admin/images/ajax-loader.gif">    
	</body>
</html>
